<script setup>
import { ref } from 'vue'

</script>

<template>
	<view class="ranking">
		<view class="cover">
			<image
				src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-20/84abb5b1-8344-49ae-afc1-9cb932f3d593.jpg"
			></image>
		</view>
		<view class="tabs">
			<text class="text active">抢先尝鲜</text>
			<text class="text">新品预告</text>
		</view>
		<view class="table">
			<uni-list :border="true">
				<uni-list-chat
					link
					:avatar-circle="true"
					title="uni-app"
					avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
					note="您收到一条新的消息"
					time="2020-02-02 20:20"
					to="/pages/survey/survey">
				</uni-list-chat>
				<uni-list-chat
					:avatar-circle="true"
					title="uni-app"
					avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
					note="您收到一条新的消息"
					time="2020-02-02 20:20"
					badge-positon="left"
					badge-text="99">
				</uni-list-chat>
			</uni-list>
		</view>
	</view>
</template>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.ranking {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10rpx 0 0;
  position: relative;
}
.cover {
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;
  .text {
    margin: 0 20rpx;
    position: relative;
  }
  .active {
    &::after {
      content: '';
      width: 40rpx;
      height: 4rpx;
      transform: translate(-50%);
      background-color: #27ba9b;
      position: absolute;
      left: 50%;
      bottom: 24rpx;
    }
  }
}
.table{
	margin-top: 20rpx;
	padding: 0 20rpx 20rpx;
	.navigator {
		border-radius: 10rpx;
		background-color: #fff;
	}
}
</style>
